/*
 * @Description:
 * @Version: 2.0
 * @Autor: zhangjx
 * @Date: 2023-03-20 13:51:52
 * @LastEditors: uphldjx 1373577124@qq.com
 * @LastEditTime: 2024-01-20 15:15:51
 */
export default defineComponent({
	name: 'AplidPaginate',
	props: {
		total: {
			type: Number,
		},
		small: {
			type: Boolean,
			default: true,
		},
		layout: {
			type: String,
			default: 'total,sizes,prev, pager, next, jumper, ->',
		},
		current: {
			type: [Number, String],
			default: 1,
		},
		size: {
			type: [Number, String],
			default: 10,
		},
	},
	emits: ['change'],
	setup(props, { slots, attrs, emit }) {
		const pageReac = reactive({
			total: 0,
			size: props.size,
			current: 1,
		})
		watch(
			() => props.total,
			(val) => {
				pageReac.total = val
			},
			{
				immediate: true,
			}
		)
		const pageSizes = [5, 8,9,10, 15, 20, 35, 50, 100, 200, 300, 400]
		const onSizeChange = (val: number) => {
			pageReac.size = val
			pageReac.current = 1
			pageReac.total = props.total
			emit('change', pageReac)
		}
		const onCurrentChange = (val: number) => {
			pageReac.current = val
			pageReac.total = props.total
			emit('change', pageReac)
		}
		return () => {
			return (
				<el-pagination
					v-model:current-page={pageReac.current}
					v-model:page-size={pageReac.size}
					background
					onSizeChange={(val) => onSizeChange(val)}
					onCurrentChange={(val) => onCurrentChange(val)}
					page-sizes={pageSizes}
					small={props.small}
					layout={props.layout}
					total={pageReac.total}
				/>
			)
		}
	},
})
